<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  studentInfoApi,
  studentChangePassApi,
} from "@/http/Api/students/userApi";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { useStore } from "@/stores/index";

const userStore = useStore();
const router = useRouter();

const state = reactive({
  studentInfo: {
    baiJieClassId: 0,
    baiJieName: "",
    createTime: "",
    headPortrait: "",
    id: 0,
    lastLoginTime: "",
    nickname: "",
    phone: "",
    sex: "",
    username: "",
  },
});

onMounted(() => {
  studentInfoApi({
    phone: userStore.user.phone,
  })
    .then((res) => {
      // console.log("获取学生信息：", res.data);
      state.studentInfo = res.data.data;
    })
    .catch((err) => {
      console.log("获取学生信息失败：", err);
      ElMessage.error("请稍后重试");
    });
});
const { studentInfo } = toRefs(state);

const passFormRef = ref<FormInstance>();

const passForm = reactive({
  phone: "",
  originPwd: "",
  pwd: "",
  checkPass: "",
});

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password again"));
  } else if (value !== passForm.pwd) {
    callback(new Error("两次密码输入不一致"));
  } else {
    callback();
  }
};
const passRules = reactive<FormRules>({
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { min: 11, max: 11, message: "手机号格式不正确", trigger: "blur" },
  ],
  originPwd: [
    {
      required: true,
      message: "请输入原始密码",
      trigger: "blur",
    },
  ],
  pwd: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur",
    },
  ],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
});

const isVisible = ref(false);
// 打开修改密码弹窗
const onChangePassword = () => {
  isVisible.value = true;
};
const onConfirmPassword = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (!valid) {
      return console.log("submit!");
    } else {
      // console.log("error submit!", fields);
    }

    studentChangePassApi(passForm)
      .then((res) => {
        // console.log("修改结果：", res.data);
        if (res.data.code == 200) {
          isVisible.value = false;

          ElMessage({
            type: "success",
            message: res.data.msg,
          });

          passForm.phone = "";
          passForm.originPwd = "";
          passForm.pwd = "";
          passForm.checkPass = "";

          userStore.quitSystemAction().then(() => {
            router.replace("/login");
          });
        } else {
          ElMessage.error(res.data.msg);
        }
      })
      .catch((err) => {
        console.log("修改失败：", err);
        ElMessage.error("修改失败");
      });
  });
};
</script>

<template>
  <main>
    <div class="page-header">
      <div class="page-title">
        <p>个人中心</p>
      </div>
    </div>
    <div class="page-body">
      <el-form :model="studentInfo" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="学号">
              <el-input v-model="studentInfo.id" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="姓名">
              <el-input
                class="person-item-input"
                v-model="studentInfo.username"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="性别">
              <el-select
                v-model="studentInfo.sex"
                placeholder="请选择"
                disabled
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="手机号">
              <el-input
                class="person-item-input"
                v-model="studentInfo.phone"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20">
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="毕业院校">
              <el-input v-model="studentInfo.username" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="毕业时间">
              <el-input v-model="studentInfo.createTime" disabled />
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row :gutter="20">
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="专业">
              <el-input v-model="studentInfo.username" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="学历">
              <el-input v-model="studentInfo.username" disabled />
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row :gutter="20">
          <!-- <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="所学方向">
              <el-input v-model="studentInfo.baiJieClassId" disabled />
            </el-form-item>
          </el-col> -->
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="班级">
              <el-input v-model="studentInfo.baiJieName" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="开学时间">
              <el-input :value="studentInfo.createTime" disabled />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="结束时间">
              <el-input v-model="studentInfo.createTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="6" :md="8" :sm="12" :xs="24">
            <el-form-item label="所在阶段">
              <el-input v-model="studentInfo.lastLoginTime" disabled />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-button type="primary" @click="onChangePassword"
              >修改密码</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
  </main>

  <el-dialog v-model="isVisible" title="修改密码" width="60%">
    <el-form
      ref="passFormRef"
      :model="passForm"
      status-icon
      :rules="passRules"
      label-width="120px"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="passForm.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="原始密码" prop="originPwd">
        <el-input
          v-model="passForm.originPwd"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="pwd">
        <el-input v-model="passForm.pwd" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认新密码" prop="checkPass">
        <el-input
          v-model="passForm.checkPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmPassword(passFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.person-item-input {
  min-width: 95px;
}
</style>
